Progressive Web Apps (PWAs) are mobile properties that combine the best features of mobile web technologies, merging the benefits of responsive web design and native applications.
As a new web technology, PWAs often raise questions, particularly "how do I make PWAs indexable?"
Google has released an official set of best practices for making PWAs indexable. According to Google, these best practices are applicable to indexing in general, whether for a PWA or a static website.
Here are the best practices summarized into bullet points:
Best Practices for Indexing Progressive Web Apps
- Make Your Content Crawlable: Use server-side or hybrid rendering so users receive the content in the initial payload of their web request.
- Provide Clean URLs: Ensure URLs are clean and free of fragment identifiers such as, /product/25/
- Specify Canonical URLs: Include a canonical tag across all pages mirroring a particular piece of content.
- Design for Multiple Devices: Use the "srcset" attribute to fetch different resolution images for various screen densities, avoiding larger images than necessary.
- Develop Iteratively: Add new features incrementally to your site. For example, if you don’t support HTTPS yet, start by migrating to a secure site.
- Use Progressive Enhancement: Before registering a Service Worker, check for the availability of its API. Use per-API detection methods for all your website’s features.
- Test with Search Console: Monitor your site using Search Console and utilize its features like "Fetch as Google". Provide a Sitemap via the Search Console.
- Annotate with Schema.org Structured Data: Verify that your Schema.org metadata is correct using Google’s Structured Data Testing Tool.
- Annotate with Open Graph & Twitter Cards: Test your Open Graph markup with the Facebook Object Debugger Tool and familiarize yourself with Twitter’s metadata format.
- Test with Multiple Browsers: Use cross-browser testing tools to ensure your PWA is compatible across different browsers.
- Measure Page Load Performance: Use tools such as Page Speed Insights and Web Page Test to measure the load performance of your site. Research shows that 40% of consumers will leave a page that takes longer than three seconds to load.
By following these best practices, you can enhance the indexability and performance of your Progressive Web App.
